<template>
<div class="progress">
    <a-progress type="circle" :percent="data.score.value" :strokeColor="data.color.value" />
    <div class="score-detail">
        <h5>{{state.key}}</h5>
        <ul>
            <li v-for="(item, key) in state.list" :key="key">
                <p>{{key}}</p>
                <span>{{(item * 100).toFixed(2)}}%</span>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
import {
    reactive,
    toRefs,
    getCurrentInstance
} from 'vue'
export default {
    name: "progressScore",
    props: {
        data: {
            type: Object,
            required: true
        },
        keyVal: {
            type: String,
            required: true
        }
    },
    setup(props, ctx) {
        const data = toRefs(getData(props));
        const state = reactive({
            key: props.keyVal,
            list: props.data.detail
        })
        return {
            data,
            state
        }
    }
}

function getData(props) {
    let score = props.data.score * 2;
    let color = "";
    if (score > 85) {
        color = "#2ec1ac";
    } else if (score > 60) {
        color = "#ffa62b";
    } else {
        color = "#f05454";
    }
    return {
        score,
        color
    }
}
</script>

<style lang="scss">
.progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .score-detail {
        width: 50%;
        margin-top: 10px;
        position: relative;
        text-align: center;

        h5 {
            font-size: 20px;
            color: #353535;
            font-weight: 600;
            line-height: 26px;
            cursor: pointer;
        }

        &:hover ul {
            display: block;
        }

        ul {
            display: none;
            padding: 10px;
            box-sizing: border-box;
            position: absolute;
            top: 25px;
            left: 0px;
            background: #f8f8f8;
            border: 1px solid #efefef;
            border-radius: 6px;
            animation: show .5s ease forwards;
            z-index: 100;

            li {
                display: flex;
                line-height: 40px;

                p {
                    text-align: left;
                    flex: 1;
                    color: #333;
                    font-size: 15px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                span {
                    margin-left: 10px;
                    font-size: 14px;
                    color: #686868;
                }
            }
        }
    }
}

@keyframes show {
    from {
        opacity: 0;
        margin-top: -10px;
    }

    to {
        opacity: 1;
        margin-top: 0px;
    }
}
</style>
